<template>
  <div class="tem">
      <div class="rree2">
          <h2 class="hh22"><img src="img/oi.jpg"></h2>
          <p><span v-red>01</span><b>低总价167万住优质4室，这些改善好···</b></p>
          <p><span v-ora>02</span><b>一周好房|房东急售2-4室，性价比高···</b></p>
          <p><span v-yel>03</span><b>必看好房|精装2~3室性价比之选！总···</b></p>
      </div>
      <Eeer1 :arr="arra"/>
      <Eeer2 :arr1="arrd"/>
      <Eeer1 :arr="arrb"/>
      <Eeer2 :arr1="arre"/>
      <Eeer1 :arr="arrc"/>
      <Eeer2 :arr1="arrd"/>
      
      <Hh1/>
  </div>
       
</template>

<script>
import Eeer1 from "@/components/eerr1.vue"
import Eeer2 from "@/components/eerr2.vue"
import Hh1 from "@/components/h1.vue"
export default {
    components:{Eeer1,Eeer2,Hh1},
    data(){
        return{
            arr:[
                {biaoti:"将准备来了，请做好接水准备！",persion:"热门",za:"5647",neirong:"社区游戏",shijian:"1天前",img:"img/ou.jpg"},
                {biaoti:"电影背景墙，盘它！",persion:"",za:"3647",neirong:"合肥飞墨设计",shijian:"2天前",img:"img/ew1.jpg"},
                {biaoti:"隔壁家30平米小户型改造，蜗居面变通透大空间，后悔自家装早了！",persion:"",za:"5320",neirong:"住宅公园",shijian:"19小时前",img:"img/ew4.jpg"},
                {biaoti:"享受健康生活，长安区绿化好盘！",persion:"",za:"0",neirong:"先大数据荐房",shijian:"2021-12-05",img:"img/ew1.jpg"},
            ],
            arr1:[
                 {biaoti:"12月起，一旦你陷入这5大误区，房子有房产证，签了合同也无效！",persion:"百科",za:"1.6万",neirong:"眼里只有房",shijian:"19小时前"},
                 {biaoti:"房子境已会“缩水”?12月买房请多家注意这5个方面！",persion:"",za:"4552",neirong:"眼里只有房",shijian:"4小时前"},
            ]
        }
    },
    computed:{
        arra(){
            return this.arr.slice(0,1)
        },
        arrb(){
            return this.arr.slice(1,2)
        },
        arrc(){
            return this.arr.slice(2,3)
        },
        arrd(){
            return this.arr1.slice(0,1)
        },
        arre(){
            return this.arr1.slice(1,2)
        },

    },
    directives:{
        red:{
            inserted(el){
                el.style.color="#f13619"
            }
        },
        ora:{
            inserted(el){
                el.style.color="#fa6200"
            }
        },
        yel:{
            inserted(el){
                el.style.color="#f89b00"
            }
        },
    }
}
</script>

<style scoped>
.tem{
    width: 94%;
    height: 1.79rem;
    margin: auto;
    margin-top: .7rem;
}
.rree2{
    width: 100%;
    height: 100%;
    /* border: 1px solid red; */
    box-shadow: .02rem .03rem .08rem -0.06rem;

}
.rree2 .hh22{
    width: 100%;
    height: .44rem;
}
.rree2 .hh22 img{
    width: 100%;
    height: .44rem;
}
.rree2 p{
    width: 89.5%;
    height: .45rem;
    padding: 0 .2rem;
    line-height: .45rem;
}
.rree2 p span{
    margin-right: .1rem;
}
</style>